<template>
  <div class="home">

    <!-- 英雄区 -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1>探索AI提示词的无限可能</h1>
          <p>发现、收藏、创建和分享高质量AI提示词，让AI更懂你的需求</p>
          <div class="search-box">
            <a-input-search
              placeholder="搜索提示词..."
              size="large"
              enter-button="搜索"
              @search="onSearch"
              class="responsive-search"
            />
          </div>
          <div class="hero-tags">
            <span>热门标签：</span>
            <a-tag color="blue" @click="searchByTag('写作')">写作</a-tag>
            <a-tag color="green" @click="searchByTag('编程')">编程</a-tag>
            <a-tag color="orange" @click="searchByTag('设计')">设计</a-tag>
            <a-tag color="purple" @click="searchByTag('营销')">营销</a-tag>
            <a-tag color="cyan" @click="searchByTag('学习')">学习</a-tag>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门提示词 -->
    <section class="popular-prompts">
      <div class="container">
        <div class="section-header">
          <h2>热门提示词</h2>
          <a-radio-group v-model:value="sortType" button-style="solid">
            <a-radio-button value="popular">最受欢迎</a-radio-button>
            <a-radio-button value="newest">最新发布</a-radio-button>
            <a-radio-button value="trending">本周趋势</a-radio-button>
          </a-radio-group>
        </div>
        
        <div class="prompt-grid">
          <a-row :gutter="[24, 24]">
            <a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="prompt in popularPrompts" :key="prompt.id">
              <a-card hoverable class="prompt-card" @click="viewPromptDetail(prompt.id)">
                <template #cover>
                  <div class="prompt-card-header" :style="{ backgroundColor: prompt.color }">
                    <div class="prompt-icon">{{ prompt.icon }}</div>
                  </div>
                </template>
                <a-card-meta :title="prompt.title">
                  <template #description>
                    <div class="prompt-description">{{ prompt.description }}</div>
                    <div class="prompt-meta">
                      <span><eye-outlined /> {{ prompt.views }}</span>
                      <span><like-outlined /> {{ prompt.likes }}</span>
                      <span><star-outlined /> {{ prompt.favorites }}</span>
                    </div>
                    <div class="prompt-tags">
                      <a-tag v-for="tag in prompt.tags" :key="tag">{{ tag }}</a-tag>
                    </div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </div>
        
        <div class="view-more">
          <a-button type="primary" @click="router.push('/prompts')">查看更多提示词</a-button>
        </div>
      </div>
    </section>

    <!-- 分类浏览 -->
    <section class="categories">
      <div class="container">
        <h2>按分类浏览</h2>
        <div class="category-grid">
          <a-row :gutter="[16, 16]">
            <a-col :span="8" v-for="category in categories" :key="category.id">
              <div class="category-card" @click="browseCategory(category.id)">
                <div class="category-icon">{{ category.icon }}</div>
                <h3>{{ category.name }}</h3>
                <p>{{ category.count }}个提示词</p>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </section>

    <!-- 会员权益 -->
    <section class="membership">
      <div class="container">
        <h2>会员专享权益</h2>
        <div class="membership-features">
          <a-row :gutter="[24, 24]">
            <a-col :xs="24" :sm="12" :md="8">
              <div class="feature-card">
                <div class="feature-icon">🚀</div>
                <h3>无限提示词</h3>
                <p>创建并保存无限数量的提示词模板</p>
              </div>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <div class="feature-card">
                <div class="feature-icon">🔒</div>
                <h3>私密提示词</h3>
                <p>创建仅自己可见的私密提示词</p>
              </div>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <div class="feature-card">
                <div class="feature-icon">📊</div>
                <h3>高级分析</h3>
                <p>查看提示词使用数据和效果分析</p>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="membership-cta">
          <a-button type="primary" size="large" @click="router.push('/pricing')">
            查看会员方案
          </a-button>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <a-layout-footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-logo">
            <img src="../assets/logo.svg" alt="提示词工具" />
            <span>提示词宝库</span>
          </div>
          <div class="footer-links">
            <div class="footer-section">
              <h4>关于我们</h4>
              <a>公司介绍</a>
              <a>联系我们</a>
              <a>加入我们</a>
            </div>
            <div class="footer-section">
              <h4>帮助中心</h4>
              <a>使用指南</a>
              <a>常见问题</a>
              <a>意见反馈</a>
            </div>
            <div class="footer-section">
              <h4>法律条款</h4>
              <a>服务条款</a>
              <a>隐私政策</a>
              <a>版权声明</a>
            </div>
          </div>
        </div>
        <div class="copyright">
          © 2023 提示词宝库 - AI提示词收集与管理平台. 保留所有权利.
        </div>
      </div>
    </a-layout-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { EyeOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const sortType = ref('popular')

// 模拟数据
const popularPrompts = ref([
  {
    id: 1,
    title: '专业文章写作助手',
    description: '帮助你撰写高质量的专业文章，包括论文、报告和博客',
    icon: '📝',
    color: '#1890ff',
    views: 2345,
    likes: 432,
    favorites: 189,
    tags: ['写作', '学术']
  },
  {
    id: 2,
    title: 'React开发专家',
    description: '解答React开发问题，提供最佳实践和代码示例',
    icon: '💻',
    color: '#52c41a',
    views: 1876,
    likes: 356,
    favorites: 142,
    tags: ['编程', 'React']
  },
  {
    id: 3,
    title: '营销文案生成器',
    description: '创建吸引人的营销文案，提高转化率',
    icon: '🔥',
    color: '#fa8c16',
    views: 2103,
    likes: 387,
    favorites: 165,
    tags: ['营销', '文案']
  },
  {
    id: 4,
    title: 'UI设计顾问',
    description: '提供UI设计建议，帮助优化用户界面和体验',
    icon: '🎨',
    color: '#722ed1',
    views: 1654,
    likes: 298,
    favorites: 124,
    tags: ['设计', 'UI/UX']
  }
])

const categories = ref([
  { id: 1, name: '写作创作', icon: '✍️', count: 256 },
  { id: 2, name: '编程开发', icon: '💻', count: 189 },
  { id: 3, name: '设计创意', icon: '🎨', count: 145 },
  { id: 4, name: '学习教育', icon: '📚', count: 203 },
  { id: 5, name: '营销推广', icon: '📢', count: 167 },
  { id: 6, name: '职场提升', icon: '💼', count: 178 }
])

const onSearch = (value) => {
  router.push(`/prompts?search=${value}`)
}

const searchByTag = (tag) => {
  router.push(`/prompts?tag=${tag}`)
}

const viewPromptDetail = (id) => {
  router.push(`/prompt/${id}`)
}

const browseCategory = (id) => {
  router.push(`/prompts?category=${id}`)
}
</script>

<style scoped>
.home {
  width: 100%;
}

/* 全局样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部导航 */
.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 32px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.user-actions {
  display: flex;
  gap: 10px;
}
/* 英雄区样式 */
.hero {
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  padding: 60px 0;
  color: #fff;
  text-align: center;
  width: 100%;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.search-box {
  max-width: 600px;
  margin: 0 auto 20px;
}

.responsive-search {
  width: 100%;
}

.hero-tags {
  margin-top: 20px;
}

.hero-tags span {
  margin-right: 10px;
}

/* 热门提示词 */
.popular-prompts {
  padding: 60px 0;
  width: 100%;
  background-color: #fff;
  margin: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.8rem;
}

.prompt-grid {
  margin-bottom: 40px;
}

.prompt-card {
  height: 100%;
  transition: all 0.3s;
}

.prompt-card:hover {
  transform: translateY(-5px);
}

.prompt-card-header {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prompt-icon {
  font-size: 48px;
}

.prompt-description {
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prompt-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  color: #999;
}

.prompt-tags {
  margin-top: 10px;
}

.view-more {
  text-align: center;
  margin-top: 20px;
}

/* 分类浏览 */
.categories {
  padding: 60px 0;
  background-color: #f5f5f5;
}

.categories h2 {
  text-align: center;
  margin-bottom: 40px;
}

.category-card {
  background: #fff;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.category-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.category-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.category-card h3 {
  margin-bottom: 10px;
}

.category-card p {
  color: #999;
}

/* 会员权益 */
.membership {
  padding: 60px 0;
}

.membership h2 {
  text-align: center;
  margin-bottom: 40px;
}

.membership-features {
  margin-bottom: 40px;
}

.feature-card {
  background: #fff;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.feature-icon {
  font-size: 36px;
  margin-bottom: 20px;
}

.membership-cta {
  text-align: center;
}

/* 页脚 */
.footer {
  background: #001529;
  color: #fff;
  padding: 60px 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo img {
  height: 32px;
  margin-right: 10px;
}

.footer-logo span {
  font-size: 18px;
  font-weight: bold;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-section h4 {
  margin-bottom: 20px;
  color: #fff;
}

.footer-section a {
  color: #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}

.footer-section a:hover {
  color: #1890ff;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #333;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 15px;
  }
  
  .container {
    padding: 0 15px !important;
    max-width: none !important;
  }
  
  .hero-section {
    padding: 40px 0;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1rem;
  }
  
  .feature-icon {
    font-size: 36px;
    padding: 15px 0;
  }
  
  .cta-section {
    margin: 40px 0;
    padding: 30px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 10px !important;
    max-width: none !important;
  }
  
  .hero-section {
    padding: 30px 0;
  }
  
  .hero-section h1 {
    font-size: 1.8rem;
  }
  
  .feature-icon {
    font-size: 32px;
    padding: 10px 0;
  }
  
  .cta-section {
    margin: 30px 0;
    padding: 20px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 15px;
  }
  
  .hero-section {
    padding: 40px 0;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1rem;
  }
  
  .feature-icon {
    font-size: 36px;
    padding: 15px 0;
  }
  
  .cta-section {
    margin: 40px 0;
    padding: 30px;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 30px 0;
  }
  
  .hero-section h1 {
    font-size: 1.8rem;
  }
  
  .feature-icon {
    font-size: 32px;
    padding: 10px 0;
  }
  
  .cta-section {
    margin: 30px 0;
    padding: 20px;
  }
}
</style>